```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FreeMarker 模板引擎指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.8;
            color: #333;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-section {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .code-block {
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .mermaid {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-section text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">FreeMarker 模板引擎</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">基于模板生成文本输出的Java模板引擎</p>
            <div class="flex justify-center space-x-4">
                <a href="#quick-start" class="bg-white text-blue-600 px-6 py-3 rounded-full font-medium hover:bg-blue-50 transition duration-300">
                    <i class="fas fa-rocket mr-2"></i>快速开始
                </a>
                <a href="#examples" class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition duration-300">
                    <i class="fas fa-code mr-2"></i>示例代码
                </a>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl font-bold mb-6" id="introduction">什么是FreeMarker?</h2>
                    <p class="text-lg mb-6 text-gray-700">
                        FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用工具，使用纯Java编写。
                        FreeMarker被设计用来生成HTML Web页面，特别是基于MVC模式的应用程序。
                    </p>
                    <p class="text-lg text-gray-700">
                        虽然FreeMarker具有一些编程的能力，但通常由Java程序准备要显示的数据，由FreeMarker生成页面，
                        通过模板显示准备的数据，简单来讲就是模板加数据模型，然后输出页面。
                    </p>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <div class="mermaid">
                            graph LR
                            A[Java数据模型] --> B[FreeMarker模板]
                            B --> C[生成的HTML页面]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Quick Start Section -->
    <section class="py-16 bg-gray-100 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold mb-12 text-center" id="quick-start">快速开始</h2>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Step 1 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-blue-600 text-4xl mb-4">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">1. 创建SpringBoot项目</h3>
                    <p class="text-gray-600 mb-4">在pom.xml中添加FreeMarker依赖</p>
                    <div class="code-block p-4 rounded-md overflow-x-auto">
                        <pre><code class="language-xml">&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
    &lt;artifactId&gt;spring-boot-starter-freemarker&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-blue-600 text-4xl mb-4">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">2. 学习默认配置</h3>
                    <p class="text-gray-600 mb-4">FreeMarker有合理的默认配置，通常无需修改</p>
                    <ul class="text-gray-600 space-y-2">
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>模板位置: /templates/</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>文件后缀: .ftl</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>自动配置</li>
                    </ul>
                </div>
                
                <!-- Step 3 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-blue-600 text-4xl mb-4">
                        <i class="fas fa-file-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">3. 创建模板页面</h3>
                    <p class="text-gray-600 mb-4">新建hello.ftl文件</p>
                    <div class="border border-gray-200 rounded-md overflow-hidden">
                        <img src="https://cdn.nlark.com/yuque/0/2023/jpeg/21449790/1692158386345-8432c376-6751-4657-b35a-3522e1a173ff.jpeg" alt="模板示例" class="w-full">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Basic Operations -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold mb-8" id="basic-operations">基本操作</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Left Column -->
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-database mr-2"></i>访问对象和数据
                        </h3>
                        <div class="code-block p-4 rounded-md overflow-x-auto">
                            <pre><code class="language-html">访问对象的方式：${stu.name}
三木运算: ${(user.sex ==1) ? string('男','女')}</code></pre>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-list-ol mr-2"></i>遍历集合
                        </h3>
                        <div class="code-block p-4 rounded-md overflow-x-auto">
                            <pre><code class="language-html">&lt;#list list as stu&gt;
    序号：${stu_index}
    姓名：${stu.name}
    电话：${stu.phone}
&lt;/#list&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column -->
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-code-branch mr-2"></i>逻辑判断
                        </h3>
                        <div class="code-block p-4 rounded-md overflow-x-auto">
                            <pre><code class="language-html">&lt;#if (age > 40)&gt;
大叔级
&lt;#elseif (age>30) &gt;
老腊肉
&lt;#else &gt;
小鲜肉
&lt;/#if&gt;</code></pre>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>NULL值处理
                        </h3>
                        <div class="code-block p-4 rounded-md overflow-x-auto">
                            <pre><code class="language-html">email:${email!''}  // email为空就显示!后面的值
&lt;#if nullObject??&gt;
该值不为null
&lt;#else &gt; 该值为null
&lt;/#if&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Generate Static Page -->
    <section class="py-16 bg-gray-100 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold mb-12" id="generate-static">生成单个商品的静态页面</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-6 text-blue-600">Controller代码</h3>
                <div class="code-block p-4 rounded-md overflow-x-auto">
                    <pre><code class="language-java">@RequestMapping("/createHtml")
public String createHtml(Integer gID, HttpServletRequest req) throws Exception {

    // 1.根据商品ID查询对象
    Goods goods= goodsService.getById(gID);

    Map&lt;String,Object&gt; map = new HashMap&lt;String, Object&gt;();
    map.put("goods",goods);
    map.put("images",goods.getGimage().split("\\|"));
    map.put("contextPath",req.getContextPath()+"/");

    // 1.获取静态资源文件路径
    String path = ItemController.class.getClassLoader().getResource("static").getPath();

    File file = new File(path+File.separator+"page");

    // 2.创建页面存在的路径
    if(!file.exists()){
        file.mkdirs();
    }
    try {
        // 3.获取模板
        Template template = configuration.getTemplate("goodsItem.ftl");

        // 4.设置生成模板的路径
        FileWriter fileWriter = new FileWriter(file.getAbsolutePath()+File.separator+gID+".html");

        // 5.生成模板
        template.process(map,fileWriter);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return "";
}</code></pre>
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-bold mb-6 text-blue-600">模板示例</h3>
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="text-xl font-semibold mb-4">设置base属性</h4>
                        <div class="border border-gray-200 rounded-md overflow-hidden">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692158386727-a2a305d6-47fd-4cdb-85c5-dd1f3fe83458.png" alt="设置base属性" class="w-full">
                        </div>
                    </div>
                    <div>
                        <h4 class="text-xl font-semibold mb-4">遍历图片集合</h4>
                        <div class="border border-gray-200 rounded-md overflow-hidden">
                            <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692158386983-89096b35-2c7f-4aec-9675-c9717cf39afd.png" alt="遍历图片集合" class="w-full">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                    <p class="text-gray-400 mt-2">分享前沿技术，探索编程之美</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300 flex items-center">
                        <i class="fas fa-globe mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>
```